<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                    user-scalable=no, 
                    initial-scale=1.0,
                    maximum-scale=1.0, 
                    minimum-scale=1.0"/>
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/chapter5.css"/>
</head>
<body>
    <!-- 
    <pre>
        移动端事件：
           单击事件
           双击事件
           滑动事件
               上滑事件
               下滑事件
               左滑事件
               右滑事件

        移动端绑定事件的方式：
            1）html标签内添加事件属性 [除click以外，仅针对PC端]
                 onclick="alert(2)"
            2）DOM元素加绑定事件
                 dom.onclick=function(){}
            3）DOM元素加监听事件
                 dom.addEventListener("事件名",function(){})

        click在移动端做点击事件时，会有300ms的延迟。

        touch触屏事件：
            1）touchstart
                手指刚接触屏幕时触发
                允许添加延迟器setTimeout(function(){fn();},750) 表示长按事件
            2）touchend
                手指从屏幕上移开时触发
            3）touchmove
                手指在屏幕上移动时触发
   
        event中的触摸属性
            touches：触屏对象数组。[touch对象的数组]
            changedTouches：触摸事件被触发的touch对象数组[事件]
            targetTouches：特定事件目标的touch对象数组[元素]
            注意：当使用浏览器模拟触屏事件时，由于一个鼠标表示一个触点，所以可以理解为changedTouches等同于targetTouches
    </pre> 
    -->

    <p class="sty1" ><!-- onclick="alert(2)" -->
        点我click
    </p>
    <p class="sty2" >
        点我touchstart
    </p>
    <div class="sty3">
         宽屏
    </div>
    <div id="parent">
        <div id="box">

        </div>
    </div>

    <div id="box2">

    </div>
    
    <script type="text/javascript" src="js/rem.js"></script>
    <script type="text/javascript" src="js/touch-0.2.14.js"></script>
    <script type="text/javascript" src="js/chapter5.js"></script>
</body>
</html>